<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./vendor/bootstrap.css">
    <link rel="stylesheet" href="./vendor/font/bootstrap-icons.css">
    <link rel="stylesheet" href="./vendor/toastr.css">
    <style>
        body {
            background-color: #f1f1f1;
        }

        .dashboard-card {
            background-color: #fff;
            padding: 16px;
            border-radius: 4px;
        }

        .dashboard-card>h5 {
            color: #bfbdc2;
        }

        .dashboard-card.sm {
            height: 120px;
        }

        .dashboard-card.lg {
            height: 256px;
        }

        .dashboard-card.xl {
            height: 400px;
        }

        .h4 {
            color: #6d767e;
            font-size: 20px;
            font-weight: 700;
        }

        .dashboard-card.score {
            height: 300px;
        }

        .nav {
            background-color: #f1f1f1;
            padding: 10px;
            display: none;
        }

        .nav>li {
            list-style: none;
            margin-right: 8px;
            color: #6d767e;
            font-size: 12px;
            cursor: pointer;
        }

        .i {
            cursor: pointer;
        }
    </style>
</head>

<body class="p-3">
    <h1 class="h4">Dashboard</h1>
    <div class="container-fluid">
        <!-- row一行 ，一行12列-->
        <div class="row">
            <!-- col是列 -->
            <div class="col-2">
                <div class="dashboard-card sm">
                    <h5>班级人数</h5>
                    <h4 class="mt-3">56</h4>
                </div>
                <div class="dashboard-card sm mt-3">
                    <h5>平均年龄</h5>
                    <h4 class="mt-3">30</h4>
                </div>
            </div>
            <div class="col-2">
                <div class="dashboard-card sm">
                    <h5>班级人数</h5>
                    <h4 class="mt-3">56</h4>
                </div>
                <div class="dashboard-card sm mt-3">
                    <h5>平均年龄</h5>
                    <h4 class="mt-3">30</h4>
                </div>
            </div>
            <div class="col-8">
                <div id="salary" class="dashboard-card lg">
                </div>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-12">
                <div class="dashboard-card score">
                    <div class="d-flex  justify-content-between">
                        <h5>成绩 score</h5>
                        <div class="d-flex location" id="switch">
                            <ul class=" nav" id="nav">
                                <li>第1次成绩</li>
                                <li>第2次成绩</li>
                                <li>第3次成绩</li>
                                <li>第4次成绩</li>
                                <li>第5次成绩</li>
                            </ul>
                            <i id="switch" class="switch-left bi bi-list ms-3 i"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-6">
                <div class="dashboard-card xl"></div>
            </div>
            <div class="col-6">
                <div id="place" class="dashboard-card xl">
                </div>
            </div>
        </div>
        <script src="./vendor/axios.js"></script>
        <script src="./vendor/bootstrap.bundle.js"></script>
        <script src="./vendor/jquery.js"></script>
        <script src="./vendor/toastr.min.js"></script>
        <script src="./vendor/echarts.js"></script>
        <script src="./js/common.js"></script>
        <script src="./js/salary.js"></script>
        <script src="./js/place.js"></script>
</body>

</html>